<template>
  <div class="workload-style">
    <div class="top-select-group">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-select v-model="serviceGroupValue" clearable placeholder="全部客服组">
        <el-option
          v-for="item in serviceGroupOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="serviceValue" clearable placeholder="全部客服">
        <el-option
          v-for="item in serviceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button style="float:right;">导出当前数据</el-button>
    </div>
    <div class="middle-data-group">
      <statistic-item
        v-for="item in itemData"
        :key="item.name"
        :text="item.text"
        :num="item.num"
        :label="item.label"
      ></statistic-item>
    </div>
    <div class="bottom-data-group">
      <div class="bottom-data-item">
        <div ref="sessionNumEcharts" style="height: 320px;width: 500px;"></div>
      </div>
      <div class="bottom-data-item">
        <div ref="sessionTimeEcharts" style="height: 320px;width: 500px"></div>
      </div>
    </div>
    <div class="bottom-table-group">
      <el-table
        :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="isLoading"
        @selection-change="handleSelectionChange"
        :cell-style="cellStyle"
      >
        <el-table-column prop="nickName" label="客服昵称" align="center"></el-table-column>
        <el-table-column prop="totalMessageCount" label="消息总量" align="center"></el-table-column>
        <el-table-column prop="totalSessionCount" label="会话总量" align="center"></el-table-column>
        <el-table-column prop="totalEffectiveSessionCount" label="有效会话数量" align="center"></el-table-column>
        <el-table-column prop="totalEndSessionCount" label="结束会话数量" align="center"></el-table-column>
        <el-table-column prop="totalSessionTime" label="会话总时长" align="center"></el-table-column>
        <el-table-column prop="totalEffectiveSessionCount" label="单会话平均消息数" align="center"></el-table-column>
        <el-table-column prop="totalEndSessionCount" label="单会话平均时长" align="center"></el-table-column>
      </el-table>
      <div class="bottom-pagination-group">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="totalData"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import StatisticItem from "@/components/items/StatisticItem";
import api from "@/api/api";
export default {
  name: "",
  components: {
    StatisticItem
  },
  props: {},
  data() {
    return {
      tableData: [],
      itemData: [
        {
          name: "item1",
          text: "总会话量",
          num: 230,
          label: "有效会话数200"
        },
        {
          name: "item1",
          text: "总客户量",
          num: 30,
          label: "有效客户20"
        },
        {
          name: "item1",
          text: "单会话平均消息数",
          num: 8,
          label: "单会话最大消息数50"
        },
        {
          name: "item1",
          text: "总会话时长",
          num: "60m",
          label: "最大会话时长5m2s"
        },
        {
          name: "item1",
          text: "平均会话时长",
          num: "9m3s",
          label: "最大会话时长5m2s"
        }
      ],
      serviceGroupOptions: [
        {
          value: "选项1",
          label: "客服组一"
        },
        {
          value: "选项2",
          label: "客服组二"
        },
        {
          value: "选项3",
          label: "客服组三"
        }
      ],
      serviceGroupValue: "",
      serviceOptions: [
        {
          value: "选项1",
          label: "王美美"
        },
        {
          value: "选项2",
          label: "七尾"
        },
        {
          value: "选项3",
          label: "李想"
        },
        {
          value: "选项4",
          label: "王志"
        }
      ],
      serviceValue: "",
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      isLoading: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.getPageData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getPageData();
    },
    drawSessionNumEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let sessionNumEchart = this.$echarts.init(this.$refs.sessionNumEcharts);
      sessionNumEchart.setOption({
        color: ["#006eff"],
        title: {
          text: "单会话消息数统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["0-10", "10-20", "20-30", "30-40", "40以上"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "会话数",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390]
          }
        ]
      });
    },
    drawSessionTimeEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let sessionTimeEchart = this.$echarts.init(this.$refs.sessionTimeEcharts);
      sessionTimeEchart.setOption({
        color: ["#006eff"],
        title: {
          text: "单会话时长统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["30s以下", "30s-2m", "2m-5m", "5m-10m", "10m以上"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "会话数",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    },
    getPageData() {
      this.isLoading = true;
      api
        .getAllWorkLoadDataAPI({
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          this.isLoading = false;
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        });
    }
  },
  created() {
    this.getPageData();
  },
  mounted() {
    this.drawSessionNumEcharts();
    this.drawSessionTimeEcharts();
  }
};
</script>

<style scoped>
.workload-style {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.middle-data-group {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.item-title-style {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}
.bottom-data-group {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 20px;
}
.bottom-data-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-pagination-group {
  padding: 20px 20px 0;
  float: right;
}
.bottom-table-group {
  display: inline-block;
  width: 100%;
}
</style>
